<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for='item in musics'>{{item}}</li>
        </ul>
        <button @click='btnClick'>点击</button>
    </div>
    <script src= '../js/vue.js'></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                musics: ['刘德华', '张学友', '张杰', '周杰伦', '陈奕迅']
            },
            methods:{
                btnClick() {
                    //1.push(),在末尾添加一个或者多个元素
                    // this.musics.push('金志文','bbb');
                    //2.pop() 删除数组中最后一个
                    //this.musics.pop();
                    //3.shift() 删除数组最前面一个
                    // this.musics.shift();
                    //4.unshift() 在数组最前面增加一个或者多个元素
                    // this.musics.unshift('重庆','cccc');

                    //5.splice:删除元素/插入元素/替换元素  
                    // splice(start) 第一个参数是起始位置
                    //删除元素:第二个参数，代表你要删除几个元素(如果没有传,则删除后面所有元素)
                    // this.musics.splice(1)
                    /* const star = 2
                    this.musics.splice(2, this.musics.length - star); */
                    //替换元素:第二个参数，表示我们要替换几个元素，后面是要替换前面元素的值
                    //this.musics.splice(1,1,'张三')
                    // this.musics.splice(1, 4, 'a', 'b', 'c', 'd');
                    //插入数据:第二个参数为0， 后面加上要添加的元素
                    // this.musics.splice(1, 0, 'a', 'b', 'c', 'd');
                    
                    //6.sort()
                    //7.reverse()

                    //8.set(修改对象，位置，值)
                //    Vue.set(this.musics, 1, '王五');
                }
            }
        })
    </script>
</body>
</html>